<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="table-container table-fullscreen">
        <div class="specTit mb16">工商信息</div>
        <div class="descriptionsBar mb16">
          <el-descriptions :column="3" border>
            <el-descriptions-item label="企业名称" :span="3">广州紫为云科技有限公司</el-descriptions-item>
            <el-descriptions-item label="法定代表人">李宗仁</el-descriptions-item>
            <el-descriptions-item label="经营状态">存续</el-descriptions-item>
            <el-descriptions-item label="工商注册号"></el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">9122541SA12A5D5HT533</el-descriptions-item>
            <el-descriptions-item label="成立日期"></el-descriptions-item>
            <el-descriptions-item label="组织机构代码"></el-descriptions-item>
            <el-descriptions-item label="营业期限"></el-descriptions-item>
            <el-descriptions-item label="注册资本"></el-descriptions-item>
            <el-descriptions-item label="核准日期"></el-descriptions-item>
            <el-descriptions-item label="企业期限"></el-descriptions-item>
            <el-descriptions-item label="实缴资本"></el-descriptions-item>
            <el-descriptions-item label="人员规模"></el-descriptions-item>
            <el-descriptions-item label="参保人数"></el-descriptions-item>
            <el-descriptions-item label="纳税人识别号"></el-descriptions-item>
            <el-descriptions-item label="行业"></el-descriptions-item>
            <el-descriptions-item label="曾用名"></el-descriptions-item>
            <el-descriptions-item label="纳税人资质"></el-descriptions-item>
            <el-descriptions-item label="登记机关"></el-descriptions-item>
            <el-descriptions-item label="注册地址" :span="3">广州市黄埔区香雪八路910号F栋2102房</el-descriptions-item>
            <el-descriptions-item label="经营范围" :span="3">企业总部管理;企业财务咨询服务;企业管理咨询服务;工商咨询服务;企业管理服务（涉及许可经营项目的除外）;高新技术的投资、运营（不含许可经营项目，法律法规禁止经营的项目不得经营）;项目投资（不含许可经营项目，法律法规禁止经营的项目不得经营）;为留学人员提供创业、投资项目的信息咨询服务;企业自有资金投资;投资咨询服务;创业投资咨询业务</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="specTit mb16">股东信息</div>
        <div class="mb16 tableBar">
          <el-table
            ref="table"
            v-loading="MX_listLoading"
            :data="gdList"
            border
            highlight-current-row
            :row-key="$_getRowKey"
            style="width: 100%;text-align:center"
            :header-cell-style="headerCellStyle"
          >
            <template slot="empty">
              <p>暂无数据！</p>
            </template>
            <el-table-column
              fixed="left"
              type="index"
              label="序号"
              width="70"
              align="center"
              :index="$_tableIndex"
            />
            <el-table-column
              v-for="item in gdColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
              :formatter="item.formatter"
              align="center"
            />
          </el-table>
        </div>
        <div class="specTit mb16">对外投资</div>
        <div class="mb16">
          <el-row :gutter="16">
            <el-col :span="12"><div class="chartBar mb16">
              <div class="chartBar--tit">对外投资区域分布图</div>
              <div class="chartBar--chart" ref="mapChart"></div>
            </div></el-col>
            <el-col :span="12"><div class="chartBar mb16">
              <div class="chartBar--tit">对外投资行业分布图</div>
              <div class="chartBar--chart" ref="pieChart"></div>
            </div></el-col>
            <el-col :span="24">
              <div class="tableBar">
                <el-table
                  ref="table"
                  v-loading="MX_listLoading"
                  :data="tzList"
                  border
                  highlight-current-row
                  :row-key="$_getRowKey"
                  style="width: 100%;text-align:center"
                  :header-cell-style="headerCellStyle"
                >
                  <template slot="empty">
                    <p>暂无数据！</p>
                  </template>
                  <el-table-column
                    fixed="left"
                    type="index"
                    label="序号"
                    width="70"
                    align="center"
                    :index="$_tableIndex"
                  />
                  <el-table-column
                    v-for="item in tzColumns"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :formatter="item.formatter"
                    align="center"
                  />
                </el-table>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="specTit mb16">案件信息</div>
        <div class="tableBar mb16">
          <el-table
            ref="table"
            v-loading="MX_listLoading"
            :data="ajList"
            border
            highlight-current-row
            :row-key="$_getRowKey"
            style="width: 100%;text-align:center"
            :header-cell-style="headerCellStyle"
          >
            <template slot="empty">
              <p>暂无数据！</p>
            </template>
            <el-table-column
              fixed="left"
              type="index"
              label="序号"
              width="70"
              align="center"
              :index="$_tableIndex"
            />
            <el-table-column
              v-for="item in ajColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
              :formatter="item.formatter"
              align="center"
            />
          </el-table>
        </div>
        <div class="specTit mb16">限制消费令</div>
        <div class="mb16">
          <div class="tableBar mb16">
            <el-table
              ref="table"
              v-loading="MX_listLoading"
              :data="xflList"
              border
              highlight-current-row
              :row-key="$_getRowKey"
              style="width: 100%;text-align:center"
              :header-cell-style="headerCellStyle"
            >
              <template slot="empty">
                <p>暂无数据！</p>
              </template>
              <el-table-column
                fixed="left"
                type="index"
                label="序号"
                width="70"
                align="center"
                :index="$_tableIndex"
              />
              <el-table-column
                v-for="item in xflColumns"
                :key="item.prop"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :min-width="item.minWidth"
                :formatter="item.formatter"
                align="center"
              />
            </el-table>
          </div>
        </div>
        <div class="specTit mb16">纳税评级</div>
        <div class="tableBar mb16">
          <el-table
            ref="table"
            v-loading="MX_listLoading"
            :data="nsList"
            border
            highlight-current-row
            :row-key="$_getRowKey"
            style="width: 100%;text-align:center"
            :header-cell-style="headerCellStyle"
          >
            <template slot="empty">
              <p>暂无数据！</p>
            </template>
            <el-table-column
              fixed="left"
              type="index"
              label="序号"
              width="70"
              align="center"
              :index="$_tableIndex"
            />
            <el-table-column
              v-for="item in nsColumns"
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :min-width="item.minWidth"
              :formatter="item.formatter"
              align="center"
            />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import chinaJson from '@/assets/mapJson/china.json'
import commonList from "@/utils/mixins/investment/commonList";
export default {
  name: "BusinessPortraits",
  mixins: [commonList],
  data() {
    let data = [
      { name: '北京市', value: 112 },
      { name: '天津市', value: 422 },
      { name: '上海市', value: 734 },
      { name: '杭州市', value: 534 },
      { name: '大连市', value: 940 }
    ];
    data.sort(function (a, b) {
      return a.value - b.value;
    });
    return {
      parentId: null,
      gdList: [],
      gdColumns: [
        { prop: 'name', label: `股东名称` },
        { prop: 'name1', label: `认缴出资方式` },
        { prop: 'name2', label: `认缴出资额(万元)` },
        { prop: 'name3', label: `认缴出资实缴` },
      ],
      tzList: [],
      tzColumns: [
        { prop: 'name', label: `被投资企业名称` },
        { prop: 'name1', label: `法定代表人/执行事务合伙人` },
        { prop: 'name2', label: `成立日期` },
        { prop: 'name3', label: `投资数额` },
        { prop: 'name', label: `投资比例` },
        { prop: 'name1', label: `经营状态` },
        { prop: 'name2', label: `行业` },
        { prop: 'name3', label: `区域` },
      ],
      ajList: [],
      ajColumns: [
        { prop: 'name', label: `立案日期` },
        { prop: 'name1', label: `案号` },
        { prop: 'name2', label: `执行标的` },
        { prop: 'name3', label: `未履行金额` },
        { prop: 'name', label: `执行法院` },
        { prop: 'name1', label: `终本日期` },
      ],
      xflList: [],
      xflColumns: [
        { prop: 'name', label: `立案日期` },
        { prop: 'name1', label: `案号` },
        { prop: 'name2', label: `姓名` },
        { prop: 'name3', label: `企业信息` },
        { prop: 'name', label: `申请人信息` },
        { prop: 'name1', label: `发布时间` },
      ],
      nsList: [],
      nsColumns: [
        { prop: 'name', label: `评价年度` },
        { prop: 'name1', label: `纳税人信用级别` },
        { prop: 'name2', label: `类型` },
        { prop: 'name3', label: `纳税人识别号` },
        { prop: 'name', label: `评价单位` },
      ],
      headerCellStyle: {
        backgroundColor: '#F2F9FC',
        color: '#333'
      },
      mapChartInfo: null,
      mapChartOption: {
        visualMap: {
          left: 16,
          bottom: 16,
          orient: 'horizontal',
          itemWidth: 12,
          itemHeight: 120,
          min: 0,
          max: 999,
          inRange: {
            color: ['#BAE7FF', '#1890FF', '#0050B3']
          },
          // text: [999, 0],
          seriesIndex: 0,
          calculable: true
        },
        grid: {
          left: '74%',
          right: 16,
          top: '6%',
          bottom: '6%'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: data.map(function (item) {
            return item.name;
          })
        },
        animationDurationUpdate: 1000,
        series: [
          {
            name: '对外投资区域分布图',
            type: 'map',
            roam: true,
            map: 'china',
            zoom: 1,
            scaleLimit: {
              min: .5,
              max: 5
            },
            layoutCenter: ['33%', '65%'],
            layoutSize: 355,
            aspectScale: 0.75,
            animationDurationUpdate: 1000,
            universalTransition: true,
            data: data,
            itemStyle: {
              areaColor: '#EDF9FF'
            },
            emphasis: {
              itemStyle: {
                areaColor: '#F98600'
              }
            }
          },
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: "#1890FF"
            },
            data: data.map(function (item) {
              return {...item, visualMap: false};
            }),
            emphasis: {
              itemStyle: {
                color: '#0050B3'
              }
            },
            universalTransition: true
          }
        ]
      },
      pieChartInfo: null,
      pieChartOption: {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          right: "20px",
          align: 'left',
          textStyle: {
            color: "#333"
          }
        },
        color: ['#1289FF', '#36CBCA', '#8EC21F', '#FFB700', '#3DCB8D', '#FF5858', '#F98600', '#FFD350', '#E252A1', '#D3DEF0'],
        series: {
          name: '对外投资行业分布图',
          type: 'pie',
          radius: ['38%', '60%'],
          center: ['37%', '50%'],
          label: {
            color: "#333"
          },
          itemStyle: {
            borderWidth: 2,
            borderColor: "#fff"
          },
          data: [{name: '医疗行业',value: 142}, {name: '互联网',value: 379}, {name: '生物',value: 75},{name: '交通',value: 104}],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.3)'
            }
          }
        }
      }
    }
  },
  watch:{
    parentId(val, old){
      if (val !== old){
        // this.getList()
      }
    }
  },
  created() {
    if (!this.$route.query.id){
      this.$message.error('请带入企业数据标识！')
      return
    }
    this.parentId = this.$route.query.id
  },
  activated() {
    this.parentId = this.$route.query.id
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init(){
      //map
      echarts.registerMap('china', chinaJson)
      const mapDom = this.$refs.mapChart
      this.mapChartInfo = echarts.init(mapDom)
      this.mapChartInfo.setOption(this.mapChartOption)
      //pie
      const dom = this.$refs.pieChart
      this.pieChartInfo = echarts.init(dom)
      this.pieChartInfo.setOption(this.pieChartOption)
      window.addEventListener('resize', () => {
        this.mapChartInfo.resize()
        this.pieChartInfo.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .specTit{
    font-weight: 600;
    font-size: 15px;
    color: #333;
    padding-left: 10px;
    position: relative;
    line-height: 1;
    &:before{
      position: absolute;
      content: '';
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background-color: #1289FF;
      border-radius: 0 2px 2px 0;
    }
  }
  .mb16{
    margin-bottom: 16px;
  }
  .chartBar{
    border: 1px solid #E8E8E8;
    position: relative;
    &--tit{
      position: absolute;
      left: 16px;
      top: 16px;
      font-weight: 600;
      font-size: 15px;
      color: #333;
      z-index: 3;
    }
    &--chart{
      width: 100%;
      height: 355px;
      z-index: 2;
    }
  }
  .descriptionsBar{
    ::v-deep .el-descriptions{
      color: #222;
      font-size: 14px;
      .is-bordered .el-descriptions-item__cell{
        border: 1px solid #e8e8e8;
        padding: 12px 10px;
        min-width: 140px;
      }
      .el-descriptions-item__label.is-bordered-label {
        font-weight: 700;
        color: #333;
        background: #F2F9FC;
        font-size: 14px;
      }
    }
  }
  .tableBar{
    ::v-deep .el-table__empty-block{
      border-left: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
  }
</style>
